<template>
  <el-container>

    <el-header height="150px">{{user}}(先生/女士)欢迎登录</el-header>

    <el-main>
      <el-row>
        <div class="r">
          <el-button type="primary" @click="deposit()" round>存款</el-button>&nbsp;&nbsp;&nbsp;
        </div>
      </el-row>

      <el-row>
        <div class="l">&nbsp;<el-button type="primary" @click="GetBalance()" round>查询余额</el-button>
        </div>
        <div class="r">
          <el-button type="primary" @click="Take()" round>取款</el-button>&nbsp;&nbsp;&nbsp;
        </div>
      </el-row>

      <el-row>
        <div class="l">&nbsp;<el-button type="primary" @click="ListStream()" round>查询流水</el-button>
        </div>
        <div class="r">
          <el-button type="primary" @click="signOut()" round>退出登录</el-button>&nbsp;
        </div>
      </el-row>
      <el-dialog :title="title" width="50%"  :visible.sync="dialogAddVisible"   @close="closeDialogAddVisible()"    :modal-append-to-body="false">
        <el-form :model="Form" ref="Form" v-if="Form.input">
        <span>{{behavior}}</span>
        <el-input v-if="BanCardBalance==null" ref="projectAmount" v-model="Form.projectAmount" type="text" placeholder="请输入金额" @blur="projectAmounts" clearable :maxlength="32"></el-input>
          <el-input v-if="BanCardBalance" v-model="BanCardBalance" type="text" v-bind:disabled="disabled" clearable :maxlength="32"></el-input>
        </el-form>
        <div v-if="checkBalance">
          <el-table :data="ListStreams" height="250" border style="width: 100%">
            <el-table-column prop="atm" label="用户名" width="180">
              <template slot-scope="scope">
                <span>{{bankcardNumber}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="atm"  label="操作类型" width="180">
              <template slot-scope="scope">
                <span>{{scope.row.streamRecord}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="atm" label="操作金额">
              <template slot-scope="scope">
                <span>{{scope.row.streamMoney}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="atm"  label="操作时间">
              <template slot-scope="scope">
                <span>{{scope.row.gmtCreate | dateFormat }}</span>
              </template>
            </el-table-column>
          </el-table></div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogAddVisible = false">取 消</el-button>
          <el-button type="primary" @click="open()">确 定</el-button>
        </span>
      </el-dialog>
    </el-main>
  </el-container>
</template>
<script>
  export default {
    name: "Index",
    data() {
      return {
        user:"",
        Form: {
          input: false,
          projectAmount:"",},
        bankcardNumber:"",
        ListStreams:null,
        BanCardBalance:null,
        checkBalance:false,
        title: "",
        dialogAddVisible: false,
        behavior:"",
        dataList: [],
        // 对话框显示与否
        dialogVisible: false,
        dataloading: false,
        disabled:true,
        money:""
      }
    },
    methods: {
      /**
       *点击新增按钮，弹出新增模态框
       * @param
       */
      deposit() {
        this.dialogAddVisible = true;
        this.Form.input=true;
        this.behavior="请输入存入的金额";
        this.title = "存款";
        this.Form.projectAmount="";
      },

      Take() {
        this.dialogAddVisible = true;
        this.Form.input=true;
        this.behavior="请输入取出的金额";
        this.title = "取款";
        this.Form.projectAmount="";
      },

      GetBalance() {
        this.dialogAddVisible = true;
        this.$axios.post(this.global.serverPath +'/GetBankCardBalance/').then(response => {
          this.BanCardBalance =this.toThousandsNoZero(response.data);
        }).catch(err => {
        });
        this.Form.input=true;
        this.behavior="用户余额为";
        this.title = "查询余额"
      },
      ListStream() {
        this.dialogAddVisible = true;
        this.checkBalance=true;
        this.$axios.post(this.global.serverPath +'/ListStreamByBankcard/').then(response => {
          this.ListStreams=  response.data;
          this.bankcardNumber=sessionStorage.getItem('bankcardNumber');
        }).catch(err => {
        });
        this.title = "查询流水"
      },
      signOut() {
        this.$confirm('此操作将退出账户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
            this.$axios.post(this.global.serverPath +'/Logout/').then(response => {
              location.reload();
              this.dialogAddVisible = false;
              this.$router.push("/");
              this.$message({
                type: 'success',
                message: '退出成功!'
              });

              return
            });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消退出'
          });
        });
      },
      /**
       *关闭或取消模态框，清空值
       * @param
       */
      closeDialogAddVisible() {
        this.checkBalance = false;
        this.Form.input=false;
        // this.$refs['Form'].resetFields(); //element封装的方法,清空模态框的值
        this.title = "" ;//初始化title的值
        this.BanCardBalance=null;
      },

      /**
       *确定新增数据
       * @param
       */
      toThousandsNoZero(num) {
        return num ? ( (isNaN(parseFloat(num.toString().replace(/,/g, ""))) ? 1 : parseFloat(num.toString().replace(/,/g, "")))).toFixed(2).toString().replace(/(\d)(?=(\d{3})+\.)/g, function ($0, $1) {
          return $1 + ",";
        }) : "";
      },
      projectAmounts(){//this.form.projectAmount 金额
        if(isNaN(parseFloat(this.Form.projectAmount))){
          this.Form.projectAmount= 0.00;
        }else{
          this.money=this.Form.projectAmount;
          this.Form.projectAmount=this.toThousandsNoZero(this.Form.projectAmount);
        }},
      open(){
        if(this.Form.input==true){
          if( this.title == "取款"){
            console.log(this.Form.projectAmount);
            this.$axios.post(this.global.serverPath +'/TakeBankCardBalance?money='+parseFloat(this.money)).then(response => {
              if(response.data != true) {
                this.dialogAddVisible = false;
                this.$message({
                  type: 'info',
                  message: response.data
                });
                return
              }
              this.dialogAddVisible = false;
              this.$message({
                type: 'info',
                message: "取钱成功！"
              });
              return
            });
          }
          if(this.title == "存款"){
         var money= this.Form.projectAmount;
         console.log(money);
            this.$axios.post(this.global.serverPath +'/DepositBankCardBalance?money='+parseFloat(this.money)).then(response => {
              if(response.data != true) {
                this.dialogAddVisible = false;
                this.$message({
                  type: 'info',
                  message: response.data
                });

                return
              }
              this.dialogAddVisible = false;
              this.$message({
                type: 'info',
                message: "存钱成功！"
              });
              return
            });
          }
        }
        return
      }
    },
    mounted() {
      this.$axios.post(this.global.serverPath +'/GetUserByBankCard/').then(response => {
        this.user = response.data.userRealName;
      }).catch(err => {
      });

    }
  }
</script>
<style type="text/css">
  html,
  body,
  .el-container {
    /*设置内部填充为0，几个布局元素之间没有间距*/
    padding: 0px;
    /*外部间距也是如此设置*/
    margin: 0px;
    /*统一设置高度为100%*/
    height: 100%;
  }

  .el-header {
    background-color: #B3C0D1;
    color: #333;
    text-align: right;
    line-height: 250px;
  }

  .el-main {
    background-color: #E9EEF3;
    color: #333;
    border: 50px;
  }

  .el-row {
    height: 33%;
  }

  .l {
    text-align: left;
  }

  .r {
    text-align: right;
  }
</style>
